Animation

You create animated GIFs in Fireworks using frames. Each frame contains a different image. Elements that you want to appear in all frames are placed on a separate layer that is shared among all the frames. As the sequence of frames is displayed in order, it creates the illusion of movement.

1 Open the document Animated_Start.png located in the Tutorial folder in the Fireworks application folder.
2 Display the Layers panel and click the New / Duplicate Layer button at the bottom of the panel.
Now you'll move the thumbnails onto the new layer.
3 Select the four thumbnails by Shift-clicking each image with the Pointer tool.
The blue square in the column to the right of Layer 1 in the Layers panel indicates that the selection is on that layer.
4 Drag the blue square that is next to Layer 1 to the new layer, Layer 2.
Now you can share Layer 1 across frames so that the text appears in each frame of the animation.
5 Select Layer 1 in the Layers panel.
6 Open the options pop-up menu on the Layers panel (click the triangle at the top of the panel) and choose Share Layer. Notice that a filmstrip icon appears to the right of the layer name to indicate that the layer is shared across frames.
7 Shift-click the thumbnails to select them again.
8 Drag the thumbnails on top of the text and align them over the last four letters in the logo.
Next you'll distribute the thumbnails to separate frames to create the animation.
9 Display the Frames panel and click the Distribute to Frames button at the bottom of the panel.
10 Display the Optimize panel and choose Animated GIF from the export file format pop-up menu. You have to use Animated GIF to export all the frames to the file. Using GIF would export only the first frame.
11 Shift-click all the frames in the Frames panel and choose Properties from the options menu on the panel. (Click the triangle at the top of the panel.)
12 Set the frame delay to 50 (which is a half-second) and press Enter (Windows) or Return (Macintosh). The frame delay sets the speed for the animation.
13 Click the Play button at the bottom of the application window (Windows) or the document window (Macintosh). Note that play button changes to a stop button as the animation plays. Click the stop button to stop the animation.
14 Choose File > Save As, name the document my_animation, and click Save. If desired, export the file and test it in a browser.

Congratulations on completing the Fireworks tutorial. You're now ready to create your own artwork using Fireworks.